<template>
  <div class="blogs container">
    <h2>最近文章</h2>
    <p>记录一些编程小技术，生活中的感悟，遇到的有趣事。</p>
    <a-row :gutter="20">
      <a-col :xs="24" :sm="12" :xl="8" :xxl="6" v-for="(item, index) in articles" :key="index">
        <a-card :hoverable="true" :bordered="true" class="article">
          <img alt="文章配图" :src="item.imgUrl" slot="cover" style="height: 180px;" @click="goTo(`/a/`+item.uuid)"/>
          <a-card-meta :description="item.createAt">
            <p slot="title" class="subtitle" @click="goTo(`/a/`+item.uuid)">{{ item.title }}</p>
            <a-avatar
              slot="avatar"
              src="https://api.sofuny.cn/static/image/logo.png"
            />
          </a-card-meta>

        </a-card>
      </a-col>
    </a-row>

    <div style="display: flex;justify-content: center;align-items: center;height: 80vh">
      <a-empty v-if="articles.length === 0" :description="`暂无文章...`"/>
    </div>

  </div>
</template>

<script>
  import app from "../../app"
  import moment from "moment"
  moment.locale("zh-CN");
  export default {
    name: "blogs",
    head: ()=>({ title: "博客 - "+app.name}),
    async asyncData({ $axios, store, error }) {
      const resp = await $axios.$get(`${app.api}/api/${app.apiVersion}/articles/`);
      let articles = resp.code === 200 ? resp.data : [];
      articles.forEach((item)=>{
        item.createAt = moment(item.createAt).format("YYYY-MM-DD HH:MM:ss")
      });
      return { articles }
    },
    methods: {
      goTo(path) {
        this.$router.push({ path: path })
      }
    }
  }
</script>

<style scoped>
  .blogs{
    margin-top: 120px;
    min-height: 100vh;
  }
  .article{
    margin-top: 20px;
    max-width: 320px;
  }
  .subtitle{
    margin-bottom: 0rem;
  }
  @media screen and (max-width: 1023px){
    .blogs{
      margin-top: 70px;
      margin-left: 20px;
    }
  }
</style>
